<template>
    <page-box class="custom-page-box">
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName(
                        '/module-manage/town-task-handle'
                    )"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                        >{{ item.meta.title }}</ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{
                        item.meta.title
                    }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item
                    name="TownCreatedList"
                ></ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <div class="task-detail-header">
            <div class="title">
                <p>
                    总任务名称:<i>{{ tableName }}</i>
                </p>
                <p class="state">
                    总任务状态:
                    <span :class="{ unFinish: !_isFinish }">{{
                        $route.query.taskId
                            ? _isFinish
                                ? "已审批"
                                : "待审批"
                            : _isFinish
                            ? "已完成"
                            : "进行中"
                    }}</span>
                </p>
                <p class="yellow" @click="getTable">
                    子任务总数({{ count.total }})
                </p>
                <p class="first4" @click="searchData(2)">
                    已完成子任务({{ count.finished || 0 }})
                </p>
                <p class="blue" @click="searchData(1)">
                    进行中的子任务({{ count.unfinished || 0 }})
                </p>
                <p class="red">
                    逾期子任务({{ count.finishedExpireCount || 0 }})
                </p>
            </div>
            <div v-if="$route.query.taskId && !_isFinish">
                <el-button
                    type="primary"
                    @click="toAcceptance(true)"
                    class="blue"
                    >通过</el-button
                >
                <el-button type="primary" @click="toAcceptance(false)"
                    >驳回</el-button
                >
            </div>
        </div>
        <div class="area">
            <p>各区域<br />填报数</p>
            <ul>
                <li v-for="(item, index) in villageList" :key="index">
                    <p>{{ item.name }}</p>
                    <p>{{ item.count }}</p>
                </li>
            </ul>
        </div>
        <page-search>
            <page-search-column class="fixed-column">
                <page-search-item>
                    <el-button
                        type="primary"
                        class="pbb__search-btn"
                        @click="personDialog"
                        >添加子任务</el-button
                    >
                </page-search-item>
            </page-search-column>
        </page-search>
        <el-table
            v-show="tableData.length"
            class="pbb__table"
            header-cell-class-name="pbb__table-thead"
            cell-class-name="pbb__table-thead-cell"
            row-class-name="pbb__table-thead-row"
            :data="tableData"
            style="
                width: 100%;
                height: calc(100% - 108px - 88px - 58px);
                background: #fff;
                overflow-y: auto;
            "
        >
            <el-table-column
                label="序号"
                align="center"
                type="index"
                width="60"
            >
            </el-table-column>
            <el-table-column
                prop="assigneeGovernment"
                label="填报人所在区域"
                min-width="120"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="assignee"
                label="填报人"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="dataCount"
                label="实际填报数"
                min-width="100"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="status" label="完成状态" min-width="80">
                <template slot-scope="scope">
                    <span
                        :class="
                            scope.row.status === 1
                                ? 'table-tips-inProcess'
                                : 'table-tips-success'
                        "
                    >
                        {{
                            scope.row.deleted
                                ? "已删除"
                                : scope.row.status === 1
                                ? "进行中"
                                : "已完成"
                        }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="endDate" width="220" label="任务结束时间">
                <template slot-scope="scope">
                    <span
                        v-if="scope.row.endDate"
                        :class="{
                            rowRed:
                                scope.row.status === 1 &&
                                new Date(scope.row.endDate).getTime() <
                                    new Date().getTime(),
                        }"
                    >
                        {{ scope.row.endDate }}
                    </span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        @click="detailRow(scope.row)"
                        >详情</el-button
                    >
                    <el-button
                        v-if="scope.row.status === 1 && !scope.row.deleted"
                        size="mini"
                        type="text"
                        @click="showCode(scope.row)"
                        >分享码</el-button
                    >
                    <el-button
                        v-if="scope.row.status === 1 && !scope.row.deleted"
                        size="mini"
                        type="text"
                        @click="deleteRow(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <ask-empty-text
            style="height: calc(100% - 190px - 69px - 10px); background: #fff"
            v-if="tableData.length === 0"
        >
        </ask-empty-text>
        <template v-slot:footer v-if="total > 0">
            <pagination
                :total="total"
                :page.sync="pageIndex"
                :limit.sync="pageSize"
                @pagination="getTable"
            />
        </template>
        <el-dialog
            title="分享码"
            :visible.sync="dialogVisible"
            width="25%"
            :close-on-click-modal="false"
            class="img-dialog"
        >
            <div v-if="ItemCode">
                <img
                    @click="toDownLoad('data:image/png;base64,' + ItemCode)"
                    :src="'data:image/png;base64,' + ItemCode"
                    alt=""
                />
                <span>点击图片下载，分享到微信填报</span>
            </div>
            <p v-else>分享码正在生成中，请刷新页面获取</p>
        </el-dialog>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import GetFormInfoDescription from "../mixins";
import { downLoadBase64File } from "@/utils";
import { State } from "vuex-class";
// import { dialogSelect } from "@/views/process-manage/src/components/person-selection/index";

@Component({
    name: "CreatedListNotAlive"
})
export default class CreatedList extends Mixins(GetFormInfoDescription) {
    @State((state) => state.authArea) authArea: any;
    @State((state) => state.user.userInfo) user: any;
    tableName: any = "";
    total = 0;
    pageIndex = 1;
    pageSize = 10;
    tableData = [];
    // selectedList = [];
    selectedItemList = [];
    form = {
        formName: "",
        status: ""
    };

    count = {
        finished: 0,
        total: 0,
        unfinished: 0
    };

    ItemCode = "";
    dialogVisible = false;
    dialogVisibleDescription = false;
    // 已经选择的人的id,不可改变
    selectedList: any[] = [];
    // 抄送人ids
    selectCcList: any[] = [];
    // 抄送人items
    selectCcItemList: any[] = [];
    villageList: any[] = [];
    disabledIdList: any[] = [];

    get _isFinish() {
        return this.$route.query.status
            ? this.$route.query.status.toString() === "2"
            : false;
    }

    created() {
        this.getTable();
        this.getNumber();
        this.getPerson();
        this.getVillageCount();
        this.tableName = this.$route.query.name || "";
    }

    personDialog() {
        this.$selectPerson({
            title: "人员选择",
            authArea: this.authArea,
            user: this.user,
            selectedList: this.selectedList,
            // disabledList 是否需要回显且不可删除的人员id数组 不可和selectedList是同一个变量
            // disabledList是初始就定下来了的 后续是不能去操作改变的
            disabledList: this.disabledIdList,
            tabs: [
                {
                    label: "村成员",
                    name: "village",
                    type: "group"
                },
                {
                    label: "镇成员",
                    name: "town",
                    type: "group"
                }
            ]
        })
            .then((val: any) => {
                this.selectedList = val.list.map((item: any) => item.id);
                const list = this.selectedList.filter((items) => {
                    if (!this.selectCcList.includes(items)) return items;
                });
                this.addProcess(list);
            })
            .catch(() => {
                this.$message.info("取消选择");
            });
    }

    // 获取数据统计
    async getNumber() {
        const res = await this.$server["task/getCount"]({
            data: {
                totalTaskId: this.$route.query.id
            }
        });
        if (res.data.code === 200) {
            this.count = res.data.data;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    async searchData(num: any) {
        this.pageIndex = 1;
        const res = await this.$server["task/child/getTable"]({
            data: {
                status: num,
                pageSize: this.pageSize,
                currentPage: 1,
                totalTaskId: this.$route.query.id
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
        } else {
            this.tableData = [];
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 获取表格数据
    async getTable(page?: any) {
        this.pageIndex = page === 1 ? page : this.pageIndex;
        const res = await this.$server["task/child/getTable"]({
            data: {
                status:
                    Number(this.form.status) ||
                    (this.form.status === "0" ? 0 : undefined),
                pageSize: this.pageSize,
                currentPage: this.pageIndex,
                totalTaskId: this.$route.query.id
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
        } else {
            this.tableData = [];
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 根据总任务Id获取下发人员
    async getPerson() {
        const res = await this.$server["task/child/person"]({
            data: {
                totalTaskId: this.$route.query.id
            }
        });
        if (res.data.code === 200) {
            const list = res.data.data ? res.data.data.split(",") : [];
            this.selectedList = list;
            this.disabledIdList = list;
            this.selectCcList = list;
        }
    }

    // 获取各区域填报数
    async getVillageCount() {
        const res = await this.$server["task/countByVillage"]({
            data: {
                totalTaskId: this.$route.query.id
            }
        });
        if (res.data.code === 200) {
            this.villageList = res.data.data || [];
        }
    }

    // 追加流程
    async addProcess(idList: any) {
        const res = await this.$server["task/child/addProcess"]({
            data: {
                totalTaskId: this.$route.query.id,
                users: idList
            }
        });
        if (res.data.code === 200) {
            this.$message.success(res.data.message);
            this.getTable();
            this.getNumber();
            this.getPerson();
        } else {
            this.$message.error(res.data.message);
        }
    }

    detailRow(row: any) {
        this.$router.push({
            name: "TownCreatedAndReceivedDetailList",
            query: {
                name: this.$route.query.name,
                formId: this.$route.query.formId,
                processId: row.processId,
                status: row.status,
                processInstanceId: row.processInstanceId,
                reason: row.reason
            }
        });
    }

    deleteRow(row: any) {
        this.$confirm(
            "此任务删除后，任务将终止填报。是否确认删除",
            "删除任务",
            {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning"
            }
        ).then(async() => {
            const res = await this.$server["moduleManage/collection/delete"]({
                data: {
                    processInstanceId: row.processInstanceId
                }
            });
            if (res.data.code === 200) {
                this.$message.success("操作成功!");
                this.getTable();
                this.getNumber();
                this.getVillageCount();
            } else {
                this.$message.error(res.data.message || "接口请求错误!");
            }
        });
    }

    showCode(row: any) {
        this.ItemCode = row.shareCode;
        this.dialogVisible = true;
    }

    // 下载图片
    toDownLoad(code: any) {
        downLoadBase64File("分享码.png", code);
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        height: calc(100% - 100px) !important;
    }
    .page-base-footer {
        margin-top: 0 !important;
    }
    .pbb__search-box {
        background: transparent !important;
    }
    .page-base-box .pbb__search-column.tab-column .el-tabs__header {
        padding-left: 20px;
    }
}
.task-detail-header {
    padding: 10px 18px;
    .title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        p {
            font-size: 14px;
            color: #37383a;
            margin-bottom: 0;
            i {
                font-style: normal;
            }
            & + p {
                margin-left: 20px;
            }
            &.state {
                .unFinish {
                    color: #2c82c9;
                }
            }
            &.red {
                color: #de2728;
            }
            &.yellow {
                color: #37383a;
                cursor: pointer;
                &:hover {
                    border-bottom: 1px solid #37383a;
                }
            }
            &.blue {
                color: #2c82c9;
                cursor: pointer;
                &:hover {
                    border-bottom: 1px solid #2c82c9;
                }
            }
            &.first4 {
                color: #32a78f;
                cursor: pointer;
                &:hover {
                    border-bottom: 1px solid #32a78f;
                }
            }
        }
    }

    .btn {
        font-size: 14px;
        color: #2c82c9;
        cursor: pointer;
        line-height: 22px;

        &:hover {
            text-decoration: underline;
        }
    }
}
.area {
    display: flex;
    background: #fff;
    margin-bottom: 10px;
    // align-items: center;
    padding: 10px 10px 0 10px;
    & > p {
        font-size: 16px;
        margin: 0;
        margin-right: 66px;
        flex-shrink: 0;
        align-self: flex-start;
        margin-bottom: 10px;
    }
    ul {
        height: 100%;
        flex: 1;
        display: flex;
        align-self: center;
        flex-wrap: wrap;
        li {
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #f5f5f5;
            padding: 4px 24px;
            margin-right: 100px;
            margin-bottom: 16px;
            p {
                margin: 0;
                font-size: 14px;
                color: #222;
                & + p {
                    margin-top: 4px;
                }
            }
        }
    }
}
.number-info {
    width: 100%;
    height: 98px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    & > div {
        width: 20%;
        height: 78px;
        padding: 0 20px;
        & > div {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px;
            border-radius: 4px;

            img {
                width: 25px;
                height: 27.5px;
            }
            div {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-self: center;
                color: #ffffff;
                p {
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    text-align: right;
                    margin: 0;
                    span {
                        font-size: 28px;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}
.rowRed {
    color: #de2728;
}

.img-dialog {
    ::v-deep {
        .el-dialog__header {
            border-bottom: 1px solid #ccc;
        }
        .el-dialog__body {
            display: flex;
            justify-content: center;
            & > div {
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                img {
                    width: 240px;
                    height: 240px;
                    border: 1px solid #ccc;
                    cursor: pointer;
                }
                span {
                    width: 100%;
                    text-align: center;
                    font-size: 14px;
                    margin-top: 10px;
                }
            }
        }
    }
}
.rich-dialog {
    ::v-deep {
        .el-dialog__header {
            border-bottom: 1px solid #ccc;
        }
        .el-dialog__body {
            padding: 10px 20px;
            .titleName {
                font-size: 16px;
                padding: 0;
                margin: 0;
                margin-bottom: 10px;
            }
            .centent {
                max-height: 600px;
                overflow-y: scroll;
            }
        }
    }
}
</style>
